<template>
  <a-spin :spinning="confirmLoading" style="background: #fff">
    <j-form-container :disabled="false">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-collapse v-model="activeKey">
          <!-- 基本信息 -->
          <a-collapse-panel key="1" header="基本信息"> 
            <a-row :gutter="48">
              <a-col :span="8" :hidden="true">
                <a-form-model-item label="标题" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bpmBizTitle">
                  <a-input :disabled="formDisabled" v-model="model.bpmBizTitle" placeholder="请输入标题" ></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="单据编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="billNo">
                  <a-input v-model="model.billNo" placeholder="请输入单据编号" disabled></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="申请人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="proposer">
                  <select-user-by-dep
                    placeholder="请选择申请人"
                    v-model="model.proposer"
                    disabled/>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="申请部门" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="proposerDeptId">
                  <j-select-depart placeholder="请选择申请部门" v-model="model.proposerDeptId" disabled/>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="申请时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createTime">
                  <j-date
                    placeholder="请选择申请时间"
                    v-model="model.createTime"
                    :show-time="true"
                    date-format="YYYY-MM-DD HH:mm:ss"
                    style="width: 100%"
                    disabled/>
                </a-form-model-item>
              </a-col>
              <!-- <a-col :span="8">
                <a-form-model-item label="申请单位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="applicant">
                  <j-select-depart placeholder="请选择" :disabled="formDisabled" v-model="model.applicant"/>
                </a-form-model-item>
              </a-col> -->
              <a-col :span="8">
                <a-form-model-item label="借款所属团队" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="teamId">
                  <select-team-input :proposerDeptId="proposerDeptId" isApi="travellingExpenses"  placeholder="请选择团队" :disabled="formDisabled" v-model="model.teamId" :tdlx="3" @back="projectBack"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="申请公司" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="companyId">
                  <select-Company-input placeholder="请选择申请公司" :disabled="formDisabled" v-model="model.companyId" @back="projectBack"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="使用日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="useDate">
                  <a-date-picker
                    :disabled="formDisabled"
                    :disabled-date="disabledDate"
                    placeholder="请选择使用日期"
                    v-model="model.useDate"
                    style="width: 100%" />
                </a-form-model-item>
              </a-col>

              <a-col :span="8" v-if="model.teamYear=='2023'">
                <a-form-model-item label="费用所属年度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="teamYear">
                  <j-dict-select-tag
                    type="list"
                    v-model="model.teamYear"
                    dictCode="tdnd_type"
                    placeholder="请选择费用所属年度"
                    disabled/>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="是否关联项目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isFree">
                  <j-dict-select-tag
                    :disabled="formDisabled"
                    type="radio"
                    v-model="model.isFree"
                    @input="radioChange"
                    dictCode="YES_OR_NO"
                    placeholder="请选择是否关联项目"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="8" v-if="!formDisabled">
                <a-form-model-item label="关联项目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectId">
                  <select-project-input
                    :disabled="formDisabled || flag || !model.companyId || !model.teamId"
                    v-model="model.projectId"
                    placeholder="请选择关联项目"
                    :queryParamType="'1'"
                    :teamId="model.teamId"
                    :companyId="model.companyId"
                    @input="selectProject" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8" v-else>
                <a-form-model-item label="关联项目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectId">
                  <a-input
                    :readOnly="true"
                    :disabled="!model.projectId_dictText"
                    v-model="model.projectId_dictText"
                    style="color: #1890FF;"
                    placeholder="请选择关联项目"
                    @click.prevent="projectClick(model.projectId)"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="项目编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectCode">
                  <a-input disabled v-model="model.projectCode" placeholder="请输入项目编号" style="width: 100%" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="业绩归属年度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectYear">
                  <j-dict-select-tag
                    type="list"
                    v-model="model.projectYear"
                    dictCode="yjgsnd"
                    placeholder="请选择业绩归属年度"
                    disabled
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="借款方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="borrowMode">
                  <j-dict-select-tag
                    :disabled="formDisabled"
                    placeholder="请选择借款方式"
                    style="radio"
                    v-model="model.borrowMode"
                    dictCode="borrow_money"
                    @input="borrowModeBlur"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="借款用途" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="purpose">
                  <j-dict-select-tag
                    :disabled="formDisabled"
                    placeholder="请选择借款用途"
                    style="radio"
                    v-model="model.purpose"
                    dictCode="borrow_purpose"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="归还日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="returnDate">
                  <a-date-picker
                    :disabled="formDisabled"
                    format="YYYY-MM-DD"
                    :disabled-date="disabledReturnDate"
                    placeholder="请选择归还日期"
                    v-model="model.returnDate"
                    style="width: 100%" />
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="借款金额（元）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="amount">
                  <a-input-number
                    :disabled="formDisabled"
                    :max="99999999"
                    :min="0"
                    v-model="model.amount"
                    placeholder="请输入借款金额"
                    @blur="verify"
                    style="width: 100%" />
                </a-form-model-item>
                <div v-if="borrowMoneyFlag" style="position: absolute;bottom: 8px;right: 26px;line-height: 14px;color: #666">可借款金额：
                  <span :class="classFlag ? 'money' : null">{{ borrowMoney }}</span>元，
                  <span>冻结金额：{{ freezeAmount }}</span>元（冻结金额 = 未提交借款单借款金额 + 处理中借款单借款金额）
                </div>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="借款说明" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="borrowExplain">
                  <a-textarea :disabled="formDisabled" :max-length="500" v-model="model.borrowExplain" rows="4" placeholder="请输入借款说明"/>
                </a-form-model-item>
              </a-col>
              <!--              迭代13：借款申请单、费用报销单、差旅费报销单：三个单据中备注字段在新增、修改、详情、列表、弹框等页面中隐藏。-->
              <!--              <a-col :span="24">-->
              <!--                <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">-->
              <!--                  <a-textarea :disabled="formDisabled" :max-length="500" v-model="model.remark" rows="4" placeholder="请输入备注"/>-->
              <!--                </a-form-model-item>-->
              <!--              </a-col>-->
            </a-row>
          </a-collapse-panel>
          <!-- 收款信息 -->
          <a-collapse-panel key="2" header="收款信息" v-if="borrowFlag">
            <a-row :gutter="48">
              <a-col :span="8">
                <a-form-model-item label="领款人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="payee">
                  <select-user-by-dep
                    placeholder="请选择领款人"
                    v-model="model.payee"
                    disabled/>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="开户银行" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bankName">
                  <a-input v-model="model.bankName" placeholder="请输入开户银行" disabled></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="银行账户" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bankAccountNo">
                  <a-input v-model="model.bankAccountNo" :max-length="32" placeholder="请输入银行账户" disabled></a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-collapse-panel>
          <!-- 附件信息 -->
          <a-collapse-panel key="3" header="附件信息">
            <a-row :gutter="48">
              <a-col :span="24">
                <a-form-model-item prop="attachments">
                  <j-upload :disabled="formDisabled" v-model="model.attachments"></j-upload>
                  <!-- <a-button v-else icon="download" @click="viewFile(model.attachments)">文件列表</a-button> -->
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-collapse-panel>
          <!-- <a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">
            <a-button @click="submitForm">提 交</a-button>
          </a-col> -->
        </a-collapse>
      </a-form-model>
      <common-flow-list v-if="formBpm && model.bpmStatus !== '1'" :formData="formData" style="margin-top: 10px"></common-flow-list>
      <view-file-modal ref="viewFileModal"></view-file-modal>
    </j-form-container>
    <a-row :gutter="48">
      <a-col :span="24" style="text-align: center;margin-top: 15px">
        <a-button type="primary" v-if="formBpm" :style="{ marginRight: showFlowSubmitButton?'10px':'0px' }" @click="onPrint">打印</a-button>
        <a-button @click="submitForm('submit')" v-if="showFlowSubmitButton">提 交</a-button>
      </a-col>
    </a-row>
    <a-modal v-model:visible="visibleModal" title="提示" @ok="handleOk">
      <p>{{ userName }}！你有{{ num }}笔借款未结清，合计未还金额{{ outstandingAmount }}元，以及冻结金额{{ freezeAmount }}元。根据公司财务管理要求，借款未还金额累计不能超过{{ canBorrow }}元，请及时还清借款。</p>
    </a-modal>

    <!-- 详情开始 -->
    <erp-project-report-modal ref="projectForm"></erp-project-report-modal>
    <!-- 详情结束 -->

    <ErpFinanceLoanBillFormPrint v-if="formBpm" class="print_style" id="loanContent" :formData="model" :formDataHistory="formData"></ErpFinanceLoanBillFormPrint>
  </a-spin>
</template>

<script>
import { viewFile } from '@/utils/util'
import { httpAction, getAction } from '@/api/manage'
import ViewFileModal from '@/views/scy/components/ViewFileModal'
import SelectUserByDep from '@/views/scy/components/SelectUserByDep'
import SelectTeamInput from '@/views/scy/components/SelectTeamInput'
import { mapGetters } from 'vuex';
import moment from 'moment';
import SelectCompanyInput from '@/views/scy/components/SelectCompanyInput'
import CommonFlowList from '@/views/components/CommonFlowList';
import Print from '@/utils/print/printarea';
import ErpFinanceLoanBillFormPrint from './ErpFinanceLoanBillFormPrint' // 打印
import { initDictOptions, filterMultiDictText } from '@/components/dict/JDictSelectUtil'

  export default {
    name: 'ErpFinanceLoanBillForm',
    mixins: [viewFile],
    components: {
      SelectProjectInput: ()=> import('@/views/scy/components/SelectProjectInput'),
      ErpProjectReportModal:()=> import('@/views/erp/report/project/modules/ErpProjectReportModal'),
      ViewFileModal,
      SelectTeamInput,
      SelectUserByDep,
      SelectCompanyInput,
      CommonFlowList,
      ErpFinanceLoanBillFormPrint
    },
    props: {
      // 流程表单data
      formData: {
        type: Object,
        default: () => {},
        required: false
      },
      // 表单模式：true流程表单 false普通表单
      formBpm: {
        type: Boolean,
        default: false,
        required: false
      },
      // 表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      },
      // 是否隐藏可借金额
      borrowMoneyFlag: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    watch: {
      activeKey(key) {
        this.$forceUpdate()
      }
    },
    data () {
      return {
        activeKey: ['1', '2', '3'],
        classFlag: false,
        visibleModal: false,
        flag: false,
        borrowMoney: 0,
        proposerDeptId:'',
        userName: '',
        canBorrow: 0,
        num: 0,
        outstandingAmount: 0,
        model: {
          repaymentAmount: 0,
          travelReimbursementAmount: 0,
          expenseReimbursementAmount: 0,
          settleAccounts: '0',
          checkStatus: 0,
          isFree: '1',
          billNo: null,
          teamId: null,
          borrowMode: null,
          purpose: null,
          projectId: null,
          projectType: null
        },
        labelCol: {
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 24 }
        },
        confirmLoading: false,
        validatorRules: {
          useDate: [
              { required: true, message: '请选择使用日期!', trigger: 'change' }
          ],
          amount: [
              { required: true, message: '请输入借款金额!', trigger: 'blur' },
              { pattern: /^(([1-9][0-9]*)|([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2}))$/, message: '请输入正确的借款金额!' }
          ],
          borrowMode: [
              { required: true, message: '请选择借款方式!', trigger: 'blur' }
          ],
          returnDate: [
              { required: true, message: '请选择归还日期!', trigger: 'change' }
          ],
          purpose: [
              { required: true, message: '请选择借款用途!', trigger: 'blur' }
          ],
          borrowExplain: [
              { required: true, message: '请输入借款说明!', trigger: 'blur' }
          ],
          payee: [
              { required: true, message: '请选择领款人!', trigger: 'change' }
          ],
          bankName: [
              { required: true, message: '请输入开户银行!', trigger: 'blur' }
          ],
          bankAccountNo: [
              { required: true, message: '请输入银行账户!', trigger: 'blur' }
              // { pattern: /^\d{10,25}$/, message: '请输入正确的银行账户!' },
          ],
          projectId: [
              { required: true, message: '请选择关联项目!', trigger: 'change' }
          ],
          teamId: [
              { required: true, message: '请选择借款所属团队!', trigger: 'change' }
          ],
          companyId: [
            { required: true, message: '请选择所属公司!', trigger: 'change' }
          ]
        },
        url: {
          add: '/api/erp/finance/borrow/erpFinanceLoanBill/add',
          edit: '/api/erp/finance/borrow/erpFinanceLoanBill/edit',
          queryById: '/api/erp/finance/borrow/erpFinanceLoanBill/queryById',
          gainBillNo: '/api/erp/finance/borrow/erpFinanceLoanBill/gainBillNo',
          money: '/api/erp/finance/borrow/erpFinanceLoanBill/gainBorrowMoney',
          queryByProjectId: '/api/erp/project/report/erpProjectReport/queryById'
        },
        freezeAmount: 0,
        borrowFlag: true,
        visibleDetail: false,
        dictOptions: []
      }
    },
    computed: {
      formDisabled() {
        if (this.formBpm === true) {
          if (this.formData.disabled === false) {
            return false
          }
          return true
        }
        return this.disabled
      },
      showFlowSubmitButton() {
        if (this.formBpm === true) {
          if (this.formData.disabled === false) {
            return true
          }
        }
        return false
      }
    },
    async created () {
       // 备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
      // 如果是流程中表单，则需要加载流程表单data
      this.showFlowData();
      // 字典
      this.initDicts()
    },
    methods: {
      ...mapGetters(['userInfo']),
      disabledDate(current) {
        return current < moment(moment().format('YYYY-MM-DD')).subtract(0,'days')
      },
      disabledReturnDate(current) {
        return current < moment(moment(this.model.createTime).format('YYYY-MM-DD')).subtract(0,'days') || current >= moment(moment(this.model.createTime).format('YYYY-MM-DD')).add(46, 'days')
      },
      selectProject(data) {
        if (data && data.choseObj && data.choseObj.length) {
          this.model.projectCode = data.choseObj[0].finalNo
          this.model.projectYear = data.choseObj[0].year
        } else {
          this.model.projectCode = null
          this.model.projectYear = null
        }
        // this.$set(this.model, 'applicant', data.choseObj[0].signUnit) //弃用
        // this.model.teamId = data.choseObj[0].teamName
        // this.$refs.form.clearValidate('teamId');
      },
      projectBack(data) {
        this.model.teamYear = data[0].tdnd;
        this.model.projectId = null
        this.$refs.form.clearValidate('projectId');
      },
      borrowModeBlur(item) {
        if (item == 1) {
          this.borrowFlag = false
        } else {
          this.borrowFlag = true
        }
      },
      verify() {
        if (this.model.amount && this.model.amount > this.borrowMoney) {
          this.visibleModal = true
        }
      },
      handleOk() {
        this.visibleModal = false
      },
      radioChange (item) {
        // this.model.applicant = this.userInfo().employee.orgDepart; //当前登录人单位
        if (item == 0) {
          this.flag = true
          this.$set(this.model, 'projectId', null)
          this.$set(this.model, 'projectCode', null)
          this.$set(this.model, 'projectYear', null)
          // this.$set(this.model, 'teamId', null)
          this.$refs.form.clearValidate('projectId');
          // this.$refs.form.clearValidate('teamId');
          this.validatorRules.projectId = []
          // this.validatorRules.teamId = []
        } else {
          this.flag = false
          this.validatorRules.projectId = [
              { required: true, message: '请选择关联项目!', trigger: 'change' }
          ]
          // this.validatorRules.teamId = [
          //     { required: true, message: '请选择借款所属团队!', trigger: 'change'},
          // ]
        }
      },
      getBillNo () {
        const that = this
        const proposer = this.userInfo().empId
        getAction(this.url.gainBillNo, { proposer }).then((res) => {
          if (res.success) {
            that.model.billNo = res.result// 单据编号
            that.model.bpmBizTitle = that.userName + '-' + that.model.billNo// 标题
          }
        })
      },
      gainBorrowMoney (proposer, amount) {
        const that = this
        getAction(this.url.money, { proposer: proposer, amount: amount }).then((res) => {
          if (res.success) {
            that.borrowMoney = res.result['borrowMoney']// 可借金额
            that.canBorrow = res.result['canBorrow']// 最大借款金额
            that.num = res.result['num']// 未还完借款单数量
            that.outstandingAmount = res.result['outstandingAmount']// 未还金额
            that.freezeAmount = res.result['freezeAmount']// 冻结金额
            if (!that.borrowMoney > 0) {
              that.classFlag = true
            }
          }
        })
      },
      add () {
        
        this.userName = this.userInfo().empName;// 当前登录人名称
        this.modelDefault.proposer = this.userInfo().empId; // 当前登录人
        this.modelDefault.proposerDeptId = this.userInfo().deptId; // 当前登录人部门
        this.modelDefault.createTime = moment().format('YYYY-MM-DD HH:mm:ss');
        this.modelDefault.payee = this.userInfo().empId; // 领款人
        this.$set(this.modelDefault, 'bankName', this.userInfo().employee.bankName) // 开户行
        this.$set(this.modelDefault, 'bankAccountNo', this.userInfo().employee.bankCard) // 银行卡号
        this.edit(this.modelDefault);
        this.getBillNo() // 获取单据编号
      },
      async edit (record) {
        await this.$refs['form'].clearValidate();
        this.model = await Object.assign({}, record);
        this.proposerDeptId = this.model.proposerDeptId
        let proposer = await null
        let amount = await 0
        if (this.model.id) {
          proposer = this.model.proposer
          amount = this.model.amount?this.model.amount:0
        } else {
          proposer = this.userInfo().empId
        }
        if (this.model.borrowMode == 1) {
          this.borrowFlag = false
        } else {
          this.borrowFlag = true
        }
        this.radioChange(this.model.isFree)
        this.gainBorrowMoney(proposer, amount) // 获取可借金额
        this.visible = true;
      },
      // 渲染流程表单数据
      showFlowData() {
        if (this.formBpm === true) {
          let params = { id: this.formData.dataId };
          getAction(this.url.queryById, params).then((res) => {
            if (res.success) {
              this.edit(res.result);
            }
          });
        }
      },

      submitForm(type) {
        const that = this;
        if (type == 'draft') {
          // 代表保存草稿不做校验
          this.submit(type)
        } else if (type == 'submit') {
          // 触发表单验证
          this.$refs.form.validate(valid => {
            if (valid) {
              if (that.model.amount > that.borrowMoney) {
                that.visibleModal = true
                that.$emit('unButtonDisable');
                return false
              }
              that.submit(type)
            } else {
              that.$emit('unButtonDisable')
            }
          })
        } else {
          console.log('传参数，保存：draft，提交：submit')
        }
      },
      submit (type) {
        const that = this;
        let teamName = filterMultiDictText(this.dictOptions['teamManager'], that.model.teamId + '')
        let createTime = this.getCreateTime()
        this.model.returnDate = this.model.returnDate ? moment(this.model.returnDate).format('YYYY-MM-DD') : null
        // 迭代16.7 取借款所属团队-申请人-申请日期（年月日）-金额（取借款金额）
        that.model.bpmBizTitle = (that.model.teamId ? teamName + '-' : '') + that.userInfo().empName + ' - ' + createTime + (this.model.amount ? '-' + this.model.amount : '')// 标题
        that.confirmLoading = true;
        let httpurl = '';
        let method = '';
        if (!this.model.id) {
          httpurl += this.url.add;
          method = 'post';
        } else {
          httpurl += this.url.edit;
          method = 'put';
        }
        httpAction(httpurl, this.model, method).then((res) => {
          if (res.success) {
            that.$message.success(res.message);
            if (method == 'post') {
              that.model.id = res.result;
            }
            that.$emit('ok', type, that.model);
          } else {
            that.$message.warning(res.message);
            that.$emit('unButtonDisable');
          }
        }).catch((error) => {
          that.$emit('unButtonDisable', error);
        }).finally(() => {
          that.confirmLoading = false;
        })
      },
      projectClick(id) {
        const that = this
        this.$nextTick(() => {
          getAction(this.url.queryByProjectId, { id: id }).then((res) => {
            if (res.success) {
              const model = res.result
              that.$refs.projectForm.getDetail(model);
              that.$refs.projectForm.title = '项目一览表';
            }
          })
        })
      },
      handleCancelDetail() {
        this.visibleDetail = false
      },

      // 点击打印
      onPrint () {
        let print = new Print({
          el: '#loanContent',
          popTitle: '借款申请详情 · 禾美环保',
          endCallback() {

          }
        })
      },
      async initDicts() {
        initDictOptions('erp_omc_team_manager,alias_name,id').then(async (res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'teamManager', res.result)
          }
        })
      },
      getCreateTime() {
        let createTime = this.model.createTime;
        let date = createTime.substring(0, 10)
        return date.substring(0, 4) + '年' + date.substring(5, 7) + '月' + date.substring(8, 10) + '日';
      }
    }
  }
</script>
<style>
@import "../../../../../utils/print.css";
.money {
  color: red;
}
.print_style{
  position: absolute;
  top: 0;
  z-index: -1111;
}
</style>
